<template>
<div>
<el-container>
  <el-header>
    <div class="b" style="font-size:26px">
      后台管理系统
    </div>
    <el-button @click="out">退出</el-button>
  </el-header>
  <el-container>
    <el-aside :width="!isCollapse?'200px':'60px'">
         <i class="el-icon-s-operation" @click="isCollapse=!isCollapse"></i>
       <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      :router="true"
       :collapse-transition="false"
      active-text-color="#ffd04b">
   
      <el-submenu :index="item.id+''" v-for="(item,i) in authName" :key="i">

        <template slot="title">
          <i class="el-icon-location"></i>
          <span>{{item.authName}}</span>
        </template>
        <el-menu-item-group>
     
          <el-menu-item :index="ele.path" v-for="(ele,is) in item.children" :key="is">{{ele.authName}}</el-menu-item>
         
        </el-menu-item-group>
      </el-submenu>
       </el-menu>
       
    </el-aside>
    <el-main>
      <el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item><a :href="$route.path">{{$route.meta}}</a></el-breadcrumb-item>
  <el-breadcrumb-item :to="$route.path">{{$route.meta}}</el-breadcrumb-item>

</el-breadcrumb><router-view></router-view></el-main>
  </el-container>
</el-container>
</div>
</template>

<script>
import {menusApi,login} from '@/http/api'
export default {
  name: '',  // 
  
  components: {},//引入子  
  data () {//数据
   
    return {
     isCollapse:false,
     authName:[]
    }
  },
  created () { 
   
   this.menusget()
  },//todo钩子函数 实例创建之前 
  mounted () {

   },//真实dom挂载之后，运行，这时可以访问dom元素
  methods: {
    async menusget(){
      const menus=await menusApi()
      this.authName=menus
      console.log('route',this.$route);
    },
    out(){
      sessionStorage.removeItem('token')
      this.$router.push('/login')
    }
  },//!事件函数
  computed:{} , //计算属性
  watch:{ //监听属性
   a: {
deep: true,
immediate: true,
handler(newval){},
}
}
}
</script>
<style scoped lang='scss'>
.el-header{
    background-color: #00000092;
    color: #fff;
    text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
  button{
    margin-right: 150px;
  }
  .b{
    margin-left: 30px;
  }
  }
  
  .el-aside {
    background-color: #0205075d;
    color: #fff;
    text-align: center;
  
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    
   
  }
  
  .el-container {
    height: 100vh;

  }
  .el-breadcrumb{
    margin-bottom: 20px;
  }
 
</style>
